<script>
import { provide, toRefs } from 'vue'
export default {
  name: 'XtxTabs',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    const propsRef = toRefs(props)
    provide('activeName', propsRef.modelValue)

    const tabClick = (item, index) => {
      emit('update:modelValue', item.name)
      emit('tab-click', {
        item,
        index
      })
    }

    return {
      tabClick
    }
  },
  render (props) {
    const slots = this.$slots.default()
    // console.log(slots)
    const panels = []
    slots.forEach(slot => {
      if (slot.type.name === 'XtxTabsPanel') {
        panels.push(slot)
      } else if (slot.children[0]?.type?.name === 'XtxTabsPanel') {
        slot.children.forEach(panel => {
          panels.push(panel)
        })
      }
    })

    const nav = (
      <nav>
        {panels.map((panel, index) => {
          return (
            <a
              href='javascript:;'
              class={{ active: props.modelValue === panel.props.name }}
              onClick={() => this.tabClick(panel.props, index)}
            >
              {panel.props.label}
            </a>
          )
        })}
      </nav>
    )

    return <div class='xtx-tabs'>{[nav, panels]}</div>
  }
}
</script>

<style lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
